<template>
<view class="message-main tab-view">
	<status-navigator-wrap>
		<view class="page-title">消息</view>
	</status-navigator-wrap>
	<view class="container">
		<view class="message-item" @click="$router.to('message_detail', { params: { type: 0 }})">
			<view class="message-wrap">
				<view class="icon-system-message">
					<image src="@/static/images/icon/notice.png"></image>
				</view>
				<view class="info">
					<view class="top">
						<view class="name">系统消息</view>
						<view class="date-time">2024年8月3日 00:32</view>
					</view>
					<view class="bottom">
						618活动来袭买一送一！！
					</view>
				</view>
			</view>
		</view>
		<view class="message-item" v-for="(item, index) in 10" @click="$router.to('message_detail', { params: { type: 1 }})">
			<view class="message-wrap">
				<image class="head-picture" src="@/static/images/a.jpg"></image>
				<view class="info">
					<view class="top">
						<view class="name">狗大娃</view>
						<view class="date-time">2024年8月3日 00:32</view>
					</view>
					<view class="center">
						狗狗天天叫唤？怎么解决
					</view>
					<view class="bottom" v-if="index == 1">
						<view>接待: 王小二</view>
						<view>顾问: 王二妮</view>
						<view>状态: 已完成</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import statusNavigatorWrap from '@/components/status-navigator-wrap.vue'
export default {
	data() {
		return {
			
		}
	},
	computed: {
		
	},
	methods: {
		
	},
	components: {
		statusNavigatorWrap
	}
}
</script>

<style lang="less">
.message-main {
	display: flex;
	flex-direction: column;
	
	.page-title {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		color: #0B1526;
		font-size: 36rpx;
	}
	
	.container {
		margin-top: 20rpx;
		flex: 1;
		height: 0;
		overflow-y: auto;
		background: #F8F8F8;
		padding-bottom: 20rpx;
		
		.message-item {
			display: flex;
			background: #FFFFFF;
			align-items: center;
			padding: 40rpx 20rpx;
			
			&:nth-child(n+2) {
				border-top: 1px solid #F8F8F8;
			}
			
			.message-wrap {
				width: 100%;
				display: flex;
				padding-left: 20rpx;
				
				.icon-system-message {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
					background: #FF6D03;
					
					>image {
						width: 46rpx;
						height: 46rpx;
					}
				}
				
				.head-picture {
					width: 80rpx;
					height: 80rpx;
					border-radius: 100%;
				}
				
				.info {
					flex: 1;
					margin-left: 24rpx;
					
					.top {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						
						.name {
							font-size: 34rpx;
							color: rgba(0, 0, 0, 0.8);
						}
						
						.date-time {
							font-size: 24rpx;
							color: rgba(0, 0, 0, 0.3);
						}
					}
					
					.center {
						margin-top: 12rpx;
						font-size: 28rpx;
						color: rgba(0, 0, 0, 0.8);
					}
					
					.bottom {
						display: flex;
						align-items: center;
						margin-top: 12rpx;
						font-size: 28rpx;
						color: rgba(184, 184, 184, 0.8);
						
						>view {
							&:nth-child(2) {
								margin-left: 20rpx;
							}
							
							&:nth-child(3) {
								flex: 1;
								text-align: right;
							}
						}
					}
				}
			}
		}
	}
}
</style>
